<!--
 * @Author: C.
 * @Date: 2021-09-03 10:47:43
 * @LastEditTime: 2021-09-03 15:10:42
 * @Description: file content
-->

<template>
  <a-button type="dashed" class="btn" shape="round" @click="delField">删除元素</a-button>
  <a-button type="dashed" class="btn" shape="round" @click="addLabel">添加文字</a-button>
  <a-button type="dashed" class="btn" shape="round" @click="addFieldShow(true)">添加字段</a-button>
  <a-button type="dashed" class="btn" shape="round">插入图片</a-button>
  <div>
    <Row>
      <Col
        :span="12"
        v-for="field in block.nodes.filter((item) => item.role == 'value' || item.role == 'qrcode')"
        :key="field.id"
      >
        <Checkbox v-model:checked="field.show">{{ field.label }}</Checkbox>
      </Col>
    </Row>
  </div>
  <AddField @register="addFieldRegister" @success="addField" />
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import { Row, Col, Checkbox } from 'ant-design-vue';
  import { usePrintStore } from '/@/store/modules/print';
  import { FieldConstructor } from '../../../../../../utils';
  import AddField from './cpn/AddField.vue';
  import { useModal } from '/@/components/Modal';
  export default defineComponent({
    components: { AddField, Row, Col, Checkbox },
    props: {
      name: {
        type: String,
        default: 'body',
      },
    },
    setup(props) {
      let printStore = usePrintStore();
      let block = printStore.printTemplate[props.name];

      const [addFieldRegister, { openModal: addFieldShow }] = useModal();

      function addLabel() {
        block.nodes.push(
          FieldConstructor({
            role: 'label',
            label: '新字段',
          })
        );
      }
      function addField(field) {
        block.nodes.push(FieldConstructor(field));
      }
      function delField() {
        block.nodes.forEach((node, index) => {
          if (node.id == printStore.currentNode.id) {
            block.nodes.splice(index, 1);
          }
        });
      }
      return {
        block,
        delField,
        addFieldShow,
        addField,
        addLabel,
        addFieldRegister,
      };
    },
  });
</script>
<style lang="less" scoped>
  .btn {
    margin-right: 10px;
    margin-bottom: 10px;
  }
</style>
